<template>
	<view>

		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="i in imgList">
					<view class="swiper-item">
						<image class="banner" :src="i" style="width: 415px; height: 165px;" />
					</view>
				</swiper-item>
			</swiper>

			<view class="panelTitle">申领柜列表</view>
			<view>
				<view class="uni-flex uni-row row-Color" style="flex-wrap: wrap;">

					<view class="flex-item item-border" @click="ToList(cabinet.cabinnetId)"
						v-for="(cabinet,index) in cabinetList">

						<view class="uni-flex uni-column">
							<view class="flex-item flex-item-V " style="height: 30px;line-height: 30px;">
								<image class="image" src="/static/cabinet.png" />
							</view>
							<view class="flex-item flex-item-V " style="height:30px;margin-top: 50px;line-height: 30px;">{{cabinet.orgName}}
							</view>
							<view class="flex-item flex-item-V " style="height: 30px;line-height: 30px;">
								{{cabinet.cabinetName}}
							</view>
						</view>

					</view>


				</view>

			</view>

			<view class="panelTitle">消息列表</view>

			<view class="uni-flex uni-row row-Color item-border" v-for="(item,index) in messageList" :key="index" style="border-bottom: 1px solid #f1f1f1; padding: 5px 0;">

				<view class="text-center uni-flex row-Color" style="width: 40rpx;height: auto;align-items: center; display: none;">
					<uni-badge class="uni-badge-left-margin" :text="index+1" />
				</view>
				<view class="uni-flex uni-column" style="width: 100%;">
					<view class="text-left" style="margin: 0px;text-align: start; font-size: .6rem; height: auto; line-height: 24px;">
						<span>新消息: </span>
						<span class="text-right" style="float: right;">{{ new Date(item.createtime).format("YY-MM-DD") == new Date().format("YY-MM-DD") ? new Date(item.createtime).format("HH:mm") : new Date(item.createtime).format("YY-MM-DD HH:mm") }}</span>

					</view>
					<view class="text-left" style="margin: 0px; text-align: start; height: 30px; line-height: 30px;">
						<span style="display: inline-block; padding-left: 20px; width: 70%;">{{ item.describe }}</span>
						<button type="primary" style="display: inline-block; float: right; height: 24px; line-height: 24px; margin: 3px 5px; font-size: 14px;" @click="Click(item.sid)">知道了</button>
					</view>
				</view>
				<!-- <view class="uni-flex">
					<view class="example" style="display: flex;align-items: center;">
						<button type="primary" style="height: 36px; line-height: 36px; margin-right: 5px;" @click="Click(item.sid)">知道了</button>
					</view>
				</view> -->

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				messageList: [],
				cabinetList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				userEntity: this.StorageCache('user')
			}
		},
		onLoad() {
			this.Init()
		},
		methods: {
			Init() {

				this.checkLogin()


				this.ImgInit()
				this.MessageInit()
				this.CabinetInit()

			},
			ImgInit() {

				this.imgList = []

				uni.request({
					url: this.url+'AppGetImg',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						index: 1,
						size: 10
					},
					success: (res) => {

						if (res.statusCode == 200) {

							for (let i = 0; i < res.data.length; i++) {
								this.imgList.push(res.data[i].piC_LINK)
							}
						}
					},
					complete: (res) => {

					}
				});

			},
			MessageInit() {
				this.messageList = []

				uni.request({
					url: this.url+'AppGetMessage',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						type: 0,
						index: 1,
						size: 10,
						userId: this.userEntity.sid
					},
					success: (res) => {

						if (res.statusCode == 200) {
							for (let i = 0; i < res.data.length; i++) {
								this.messageList.push(res.data[i])

							}
						}
					},
					complete: (res) => {

					}
				});

			},
			CabinetInit() {
				this.cabinetList = []

				uni.request({
					url: this.url+'AppGetCabinet',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						sid: this.userEntity.orG_SID

					},
					success: (res) => {

						if (res.statusCode == 200) {

							for (let i = 0; i < res.data.length; i++) {
								this.cabinetList.push(res.data[i])
							}
						}
					},
					complete: (res) => {

					}
				});

			},
			Click(sid) {

				uni.request({
					url: this.url+'Message/ReadMessage',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						sid: sid
					},
					success: (res) => {

						if (res.statusCode == 200) {

							uni.showToast({
								title: "消息已读"
							});

							this.MessageInit()

							uni.getSystemInfo({
								success: function(result) {

									uni.pageScrollTo({
										scrollTop: result.windowHeight,
										duration: 300
									});


								}
							});

						}

					},

					complete: (res) => {
			
					}
				});



			},
			ToList(id) {
		
				this.StorageCache('id', id, 28)
				uni.switchTab({
					url: '/pages/cupboard/list?'
				})
			}

		}

	}
</script>

<style>
	.swiper-item {

		align-items: center;
	}

	.uni-swiper-dots-horizontal {
		left: 50%;
		bottom: 0px;
		text-align: center;
		white-space: nowrap;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
	}

	.panelTitle {
		background-color: white;
		padding: 10px 0;
		padding-left: 10px;
		font-size: 14px;
		font-weight: 600;
		border-bottom: 1px solid #f1f1f1;
		margin-top: 10px;
	}

	.row-Color {
		background-color: white;

	}

	.item-border {
		/* border: 1px solid #f7f1f1; */
		box-sizing: border-box;

	}
	.row-Color .item-border {
		width: 33.33%;
		padding: 10px 5px 0;
	}
	.item-border:nth-child(n - 2) {
		border-right: 1px solid #f1f1f1;
	}

	.flex-item {
		/* margin: 1px; */
		height: 180px;
		text-align: center;
		line-height: 180px;
	}

	.flex-item-V {
		width: 100%;
		text-align: center;
		color: #515151;
	}

	.text-center {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: white;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}

	.text-left {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: white;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 30rpx;
	}


	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.image {
		width: 72px;
		height: 72px;
	}
</style>
